// 基础变量
$font-size-base: 14px;
$transition-duration: 0.3s;
$transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

// 主题色 - 基础色值
$primary: #1677ff;  // 明亮的蓝色
$success: #52c41a;  // 清新的绿色
$warning: #faad14;  // 温暖的黄色
$danger: #ff4d4f;   // 鲜艳的红色
$info: #909399;     // 中性灰色

// 主题色 - 变体
$primary-light-1: mix(#fff, $primary, 10%);
$primary-light-3: mix(#fff, $primary, 30%);
$primary-light-5: mix(#fff, $primary, 50%);
$primary-light-7: mix(#fff, $primary, 70%);
$primary-light-9: mix(#fff, $primary, 90%);
$primary-dark-1: mix(#000, $primary, 10%);
$primary-dark-2: mix(#000, $primary, 20%);

// 中性色
$white: #ffffff;
$black: #000000;
$text-primary: #1f2329;    // 主要文字
$text-regular: #4e5969;    // 常规文字
$text-secondary: #86909c;  // 次要文字
$text-placeholder: #c9cdd4;// 占位文字
$text-disabled: #c2c2c2;   // 禁用文字

// 边框色
$border-base: #e5e6eb;     // 基础边框
$border-light: #f2f3f5;    // 浅色边框
$border-lighter: #f7f8fa;  // 更浅边框
$border-extra-light: #fafafa; // 最浅边框

// 填充
$fill-base: #f7f8fa;      // 基础填充
$fill-light: #f5f7fa;     // 浅色填充
$fill-lighter: #fafafa;   // 更浅填充
$fill-extra-light: #fefefe; // 最浅填充
$fill-blank: #ffffff;     // 纯白填充
$fill-dark: #f2f3f5;      // 深色填充

// 背景色
$bg-color: #ffffff;       // 基础背景
$bg-color-page: #f5f7fa;  // 页面背景
$bg-color-overlay: #ffffff; // 浮层背景

// 菜单颜色
$menu-bg: #ffffff;        // 菜单背景
$menu-text: #4e5969;      // 菜单文字
$menu-active-text: $primary; // 菜单激活文字
$menu-hover-bg: $fill-light; // 菜单悬停背景

// 登录页面
$login-bg: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
$login-card-bg: rgba(255, 255, 255, 0.9);
$login-border-radius: 12px;
$login-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
$login-text-primary: $text-primary;
$login-text-secondary: $text-regular;
$login-border: $border-base;
$login-input-height: 40px;
$login-button-height: 40px;

// 布局尺寸
$header-height: 60px;
$sidebar-width: 220px;
$sidebar-collapsed-width: 64px;
$navbar-height: 50px;
$footer-height: 60px;
$tabs-height: 40px;
$collapse-btn-size: 24px;
$collapse-btn-icon-size: 16px;

// 菜单尺寸
$menu-item-height: 50px;
$menu-sub-item-height: 44px;
$menu-icon-size: 16px;
$menu-arrow-size: 12px;
$menu-indent-base: 20px;
$menu-indent-level1: $menu-indent-base;
$menu-indent-level2: $menu-indent-base * 2;
$menu-indent-level3: $menu-indent-base * 3;
$menu-indent-level4: $menu-indent-base * 4;

// 字体大小
$font-size-extra-small: 12px;
$font-size-small: 13px;
$font-size-medium: 16px;
$font-size-large: 18px;
$font-size-extra-large: 20px;
$font-size-huge: 24px;

// 字体粗细
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-semi-bold: 600;
$font-weight-bold: 700;

// 行高
$line-height-tight: 1.2;
$line-height-base: 1.5;
$line-height-loose: 1.8;

// 间距
$spacing-mini: 4px;
$spacing-xs: 8px;
$spacing-sm: 12px;
$spacing-base: 16px;
$spacing-md: 20px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-xxl: 48px;

// 间距别名
$spacing-small: $spacing-sm;
$spacing-medium: $spacing-md;
$spacing-large: $spacing-lg;
$spacing-extra-large: $spacing-xl;
$spacing-extra-extra-large: $spacing-xxl;

// 组件间距
$component-spacing-mini: $spacing-mini;
$component-spacing-small: $spacing-sm;
$component-spacing-base: $spacing-base;
$component-spacing-large: $spacing-lg;
$component-spacing-extra-large: $spacing-xl;

// 布局间距
$layout-spacing-mini: $spacing-sm;
$layout-spacing-small: $spacing-md;
$layout-spacing-base: $spacing-lg;
$layout-spacing-large: $spacing-xl;
$layout-spacing-extra-large: $spacing-xxl;

// 内容间距
$content-spacing-mini: $spacing-xs;
$content-spacing-small: $spacing-sm;
$content-spacing-base: $spacing-base;
$content-spacing-large: $spacing-lg;
$content-spacing-extra-large: $spacing-xl;

// 圆角
$border-radius-small: 4px;
$border-radius-base: 6px;
$border-radius-large: 8px;
$border-radius-extra-large: 12px;
$border-radius-circle: 50%;

// 阴影
$shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05);
$shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
$shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.12);

// z-index层级
$z-index-negative: -1;
$z-index-zero: 0;
$z-index-normal: 1;
$z-index-fixed: 10;
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-header: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
$z-index-sidebar: 1080;
$z-index-notification: 1090;

// 响应式断点
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1920px;

// 响应式容器宽度
$container-sm: 750px;
$container-md: 970px;
$container-lg: 1170px;
$container-xl: 1600px;

// 过渡
$transition-all: all $transition-duration ease-in-out;
$transition-transform: transform $transition-duration ease-in-out;
$transition-opacity: opacity $transition-duration ease-in-out;
$transition-width: width $transition-duration cubic-bezier(0.4, 0, 0.2, 1);
$transition-margin: margin $transition-duration cubic-bezier(0.4, 0, 0.2, 1);
$transition-colors: background-color $transition-duration ease-in-out,
                   border-color $transition-duration ease-in-out,
                   color $transition-duration ease-in-out;

// 亮色主题变量
:root {
  // 品牌色
  --primary-color: #{$primary};
  --primary-light-1: #{$primary-light-1};
  --primary-light-3: #{$primary-light-3};
  --primary-light-5: #{$primary-light-5};
  --primary-light-7: #{$primary-light-7};
  --primary-light-9: #{$primary-light-9};
  --primary-dark-1: #{$primary-dark-1};
  --primary-dark-2: #{$primary-dark-2};

  // 功能色
  --success-color: #{$success};
  --warning-color: #{$warning};
  --danger-color: #{$danger};
  --info-color: #{$info};

  // 文本颜色
  --text-color: #{$text-primary};
  --text-color-primary: #{$text-primary};
  --text-color-regular: #{$text-regular};
  --text-color-secondary: #{$text-secondary};
  --text-color-placeholder: #{$text-placeholder};
  --text-color-disabled: #{$text-disabled};

  // 背景色
  --bg-color: #{$bg-color};
  --bg-color-page: #{$bg-color-page};
  --bg-color-overlay: #{$bg-color-overlay};

  // 边框色
  --border-color: #{$border-base};
  --border-light: #{$border-light};
  --border-lighter: #{$border-lighter};
  --border-extra-light: #{$border-extra-light};

  // 填充色
  --fill-base: #{$fill-base};
  --fill-light: #{$fill-light};
  --fill-lighter: #{$fill-lighter};
  --fill-extra-light: #{$fill-extra-light};
  --fill-blank: #{$fill-blank};
  --fill-dark: #{$fill-dark};

  // 菜单颜色
  --menu-bg: #{$menu-bg};
  --menu-text: #{$menu-text};
  --menu-active-text: #{$menu-active-text};
  --menu-hover-bg: #{$menu-hover-bg};

  // Element Plus 变量
  --el-color-primary: #{$primary};
  --el-color-primary-light-3: #{$primary-light-3};
  --el-color-primary-light-5: #{$primary-light-5};
  --el-color-primary-light-7: #{$primary-light-7};
  --el-color-primary-light-9: #{$primary-light-9};
  --el-text-color-primary: #{$text-primary};
  --el-text-color-regular: #{$text-regular};
  --el-text-color-secondary: #{$text-secondary};
  --el-text-color-placeholder: #{$text-placeholder};
  --el-text-color-disabled: #{$text-disabled};
  --el-bg-color: #{$bg-color};
  --el-bg-color-page: #{$bg-color-page};
  --el-bg-color-overlay: #{$bg-color-overlay};
  --el-fill-color-light: #{$fill-light};
  --el-fill-color-blank: #{$fill-blank};
  --el-fill-color: #{$fill-base};
  --el-fill-color-dark: #{$fill-dark};
  --el-border-color: #{$border-base};
  --el-border-color-light: #{$border-light};
  --el-border-color-lighter: #{$border-lighter};
  --el-border-color-extra-light: #{$border-extra-light};
  --el-border-radius-base: #{$border-radius-base};
  --el-box-shadow-light: #{$shadow-light};
  --el-box-shadow: #{$shadow};
  --el-box-shadow-dark: #{$shadow-dark};
}

// 深色主题变量
[data-theme='dark'] {
  // 品牌色
  --primary-color: #{$primary};
  --primary-light-1: #{mix(#000, $primary, 10%)};
  --primary-light-2: #{mix(#000, $primary, 20%)};
  --primary-light-3: #{mix(#000, $primary, 30%)};
  --primary-light-4: #{mix(#000, $primary, 40%)};
  --primary-light-5: #{mix(#000, $primary, 50%)};
  --primary-light-6: #{mix(#000, $primary, 60%)};
  --primary-light-7: #{mix(#000, $primary, 70%)};
  --primary-light-8: #{mix(#000, $primary, 80%)};
  --primary-light-9: #{mix(#000, $primary, 90%)};
  
  // 文本颜色
  --text-color: #{lighten($text-primary, 80%)};
  --text-color-primary: #{lighten($text-primary, 80%)};
  --text-color-regular: #{lighten($text-regular, 70%)};
  --text-color-secondary: #{lighten($text-secondary, 60%)};
  --text-color-placeholder: #{lighten($text-placeholder, 50%)};
  --text-color-disabled: #{lighten($text-disabled, 40%)};
  
  // 背景色
  --bg-color: #141414;
  --bg-color-page: #1f1f1f;
  --bg-color-overlay: #1f1f1f;
  
  // 边框色
  --border-color: #303030;
  --border-light: #262626;
  --border-lighter: #1f1f1f;
  --border-extra-light: #1a1a1a;
  
  // 填充色
  --fill-base: #262626;
  --fill-light: #1f1f1f;
  --fill-lighter: #1a1a1a;
  --fill-extra-light: #141414;
  --fill-blank: #000000;
  --fill-dark: #303030;
  
  // 菜单颜色
  --menu-bg: #141414;
  --menu-text: #{lighten($text-regular, 70%)};
  --menu-active-text: #{$primary};
  --menu-hover-bg: #1f1f1f;
  
  // Element Plus 变量
  --el-color-primary: #{$primary};
  --el-color-primary-light-3: #{mix(#000, $primary, 30%)};
  --el-color-primary-light-5: #{mix(#000, $primary, 50%)};
  --el-color-primary-light-7: #{mix(#000, $primary, 70%)};
  --el-color-primary-light-9: #{mix(#000, $primary, 90%)};
  --el-text-color-primary: #{lighten($text-primary, 80%)};
  --el-text-color-regular: #{lighten($text-regular, 70%)};
  --el-text-color-secondary: #{lighten($text-secondary, 60%)};
  --el-text-color-placeholder: #{lighten($text-placeholder, 50%)};
  --el-text-color-disabled: #{lighten($text-disabled, 40%)};
  --el-bg-color: #141414;
  --el-bg-color-page: #1f1f1f;
  --el-bg-color-overlay: #1f1f1f;
  --el-fill-color-light: #1f1f1f;
  --el-fill-color-blank: #000000;
  --el-fill-color: #262626;
  --el-fill-color-dark: #303030;
  --el-border-color: #303030;
  --el-border-color-light: #262626;
  --el-border-color-lighter: #1f1f1f;
  --el-border-color-extra-light: #1a1a1a;
  --el-box-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.3);
  --el-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  --el-box-shadow-dark: 0 8px 24px rgba(0, 0, 0, 0.5);
}

// 动画变量
$animation-duration-slow: 0.4s;
$animation-duration-base: 0.3s;
$animation-duration-fast: 0.2s;
$animation-timing-function-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
$animation-timing-function-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
$animation-timing-function-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// 基础混合器
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@mixin flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@mixin flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin multi-ellipsis($lines: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
  overflow: hidden;
}

@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin fixed-center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: $border-radius-small;
    
    &:hover {
      background: var(--text-color-secondary);
    }
  }
  
  &::-webkit-scrollbar-track {
    background: var(--fill-base);
  }
}

@mixin hover-transform {
  transition: transform $transition-duration ease-in-out;
  
  &:hover {
    transform: translateY(-2px);
  }
}

@mixin slide-up {
  animation: slide-up 0.3s ease-out;
}

@mixin fade-in {
  animation: fade-in 0.3s ease-out;
}

@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: #{$screen-xs}) { @content; }
  }
  @if $breakpoint == sm {
    @media (min-width: #{$screen-xs + 1px}) and (max-width: #{$screen-sm}) { @content; }
  }
  @if $breakpoint == md {
    @media (min-width: #{$screen-sm + 1px}) and (max-width: #{$screen-md}) { @content; }
  }
  @if $breakpoint == lg {
    @media (min-width: #{$screen-md + 1px}) and (max-width: #{$screen-lg}) { @content; }
  }
  @if $breakpoint == xl {
    @media (min-width: #{$screen-lg + 1px}) { @content; }
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 响应式布局类
@mixin generate-responsive-classes {
  // 隐藏类
  @each $breakpoint in (xs, sm, md, lg, xl) {
    @include respond-to($breakpoint) {
      .hidden-#{$breakpoint} {
        display: none !important;
      }
    }
  }

  // 容器类
  .container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;

    @include respond-to(sm) {
      max-width: $container-sm;
    }
    @include respond-to(md) {
      max-width: $container-md;
    }
    @include respond-to(lg) {
      max-width: $container-lg;
    }
    @include respond-to(xl) {
      max-width: $container-xl;
    }
  }

  // 栅格系统
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  @for $i from 1 through 12 {
    .col-#{$i} {
      flex: 0 0 percentage($i / 12);
      max-width: percentage($i / 12);
    }
  }

  @each $breakpoint in (xs, sm, md, lg, xl) {
    @include respond-to($breakpoint) {
      @for $i from 1 through 12 {
        .col-#{$breakpoint}-#{$i} {
          flex: 0 0 percentage($i / 12);
          max-width: percentage($i / 12);
        }
      }
    }
  }
}

// 图标尺寸
$icon-size-mini: 12px;
$icon-size-small: 14px;
$icon-size-base: 16px;
$icon-size-medium: 18px;
$icon-size-large: 20px;
$icon-size-extra-large: 24px;

// 头部图标尺寸
$header-icon-size: 20px;
$header-icon-size-small: 16px;

// 菜单图标尺寸
$menu-icon-size: 16px;
$menu-icon-size-small: 14px;
$menu-arrow-size: 12px;

// 按钮图标尺寸
$button-icon-size: 14px;
$button-icon-size-small: 12px;
$button-icon-size-large: 16px;

// 表单图标尺寸
$form-icon-size: 16px;
$form-icon-size-small: 14px;
$form-icon-size-large: 18px;

// 通知图标尺寸
$notice-icon-size: 20px;
$notice-icon-size-small: 16px;
$notice-icon-size-large: 24px;

// 头像尺寸
$avatar-size-mini: 24px;
$avatar-size-small: 32px;
$avatar-size-base: 40px;
$avatar-size-large: 48px;
$avatar-size-extra-large: 64px; 